<template>
  <div>
    <common-head :title="$route.name" />
    <div class="wrap">
      <div class="pricebox">
        <van-dropdown-menu>
          <van-dropdown-item
            @change="valchange"
            v-model="value1"
            :options="option1"
          />
          <van-dropdown-item
            @change="valchange"
            v-model="value2"
            :options="option2"
          />
      </van-dropdown-menu>
      </div>
      <div id="Cardbox">
        <van-card
          v-for="item in items"
          :key="item.id"
          :price="item.minPrice"
          :desc="item.characteristic ? item.characteristic : '暂无描述'"
          :title="item.name"
          :thumb="item.pic"
          @click="ClickItem(item.id)"
        >
          <template #footer>
            <van-icon
              @click.stop="dididi"
              name="shopping-cart"
              size="24px"
              color="#dd1a21"
            />
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { fetchItems } from '_api'
export default {
  components: { CommonHead },
  data () {
    return {
      items: [],
      orderBy: '',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '价格', value: 0 },
        { text: '新品', value: 1 }
      ],
      option2: [
        { text: '升序', value: 'a' },
        { text: '降序', value: 'b' }
      ]
    }
  },
  created () {
    this.valchange()
  },
  methods: {
    ClickItem (id) {
      this.$router.push({
        path: 'Detail',
        query: {
          id
        }
      })
    },
    fetchItems () {
      fetchItems({
        k: this.$route.query.keyWord,
        orderBy: this.orderBy
      }).then((res) => {
        if (res.data.code === 0) {
          console.log(res)
          this.items = res.data.data.result
        }
      })
    },
    valchange (value1, value2) {
      const _value1 = this.value1.toString()
      console.log(_value1)
      console.log(this.value2)
      if (_value1 === '0' && this.value2 === 'a') {
        this.orderBy = 'priceUp'
        console.log(this.orderBy)
        this.fetchItems()
      }
      if (_value1 === '0' && this.value2 === 'b') {
        this.orderBy = 'priceDown'
        console.log(this.orderBy)
        this.fetchItems()
      }
      if (_value1 === '1' && this.value2 === 'a') {
        this.orderBy = 'addedUp'
        console.log(this.orderBy)
        this.fetchItems()
      }
      if (_value1 === '1' && this.value2 === 'b') {
        this.orderBy = 'addedDown'
        console.log(this.orderBy)
        this.fetchItems()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 100px;
  .pricebox{
    position: fixed;
    top: 46px;
    z-index: 1000;
    width: 100%;
    .van-dropdown-menu__bar{
      box-shadow: none;
    }
  }
  #Cardbox {
    .van-card__content {
      margin-left: 20px;
      .van-card__title {
        max-height: 32px;
        font-weight: 500;
        line-height: 34px;
      }
      .van-ellipsis {
        font-size: 14px;
      }
      .van-card__bottom {
        line-height: 45px;
        .van-card__price {
          color: #dd1a21;
        }
      }
    }
  }
}
</style>
